/* Tabs 2 SuperFlexi
   Standalone tab styling. No Bootstrap required.
   Structural rules intentionally use !important in a few places so older
   site skins cannot force the tab buttons to stack, float, or become full width.

   Override the variables on .flexi-tabs2-set for site-specific styling. */

.flexi-tabs2-set {
	--tabs2-bar-bg:#f2f2f2;
	--tabs2-bar-border:#d5d5d5;
	--tabs2-tab-bg:transparent;
	--tabs2-tab-bg-hover:#e7e7e7;
	--tabs2-tab-text:#555;
	--tabs2-tab-border:#d4d4d4;
	--tabs2-tab-active-bg:#fff;
	--tabs2-tab-active-text:#222;
	--tabs2-tab-active-accent:#666;
	--tabs2-focus:#777;
	--tabs2-radius:5px;
	--tabs2-tab-radius:3px;
	--tabs2-tab-font-size:16px;
	--tabs2-tab-font-weight:600;
	--tabs2-tab-padding-y:11px;
	--tabs2-tab-padding-x:17px;
	--tabs2-content-gap:24px;
	--tabs2-content-bottom:18px;
	width:100%;
	max-width:none;
	box-sizing:border-box;
	container-type:inline-size;
	container-name:tabs2;
}
.flexi-tabs2-set *, .flexi-tabs2-set *:before, .flexi-tabs2-set *:after {box-sizing:border-box;}
.flexi-tabs2-header {width:100%;margin:0 0 20px;}
.flexi-tabs2-footer {width:100%;margin:20px 0 0;}
.flexi-tabs2-wrap {display:block!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;float:none!important;clear:both!important;}

/* Full-width tab header. Tabs wrap naturally when the module gets narrower.
   There is intentionally no horizontal scrollbar. */
.flexi-tabs2-set .flexi-tabs2-nav {
	display:flex!important;
	flex-direction:row!important;
	flex-wrap:wrap!important;
	align-items:stretch!important;
	justify-content:flex-start!important;
	gap:4px!important;
	width:100%!important;
	max-width:none!important;
	margin:0!important;
	padding:5px!important;
	float:none!important;
	clear:both!important;
	list-style:none!important;
	background:linear-gradient(to bottom,#f7f7f7,var(--tabs2-bar-bg))!important;
	border:1px solid var(--tabs2-bar-border)!important;
	border-radius:var(--tabs2-radius)!important;
	overflow:visible!important;
	box-shadow:0 1px 2px rgba(0,0,0,.04)!important;
}
.flexi-tabs2-set .flexi-tabs2-nav:empty {display:none!important;}

/* These width/flex/float rules deliberately beat generic skin button CSS. */
.flexi-tabs2-set .flexi-tabs2-nav .flexi-tabs2-button {
	appearance:none!important;
	-webkit-appearance:none!important;
	display:inline-flex!important;
	align-items:center!important;
	justify-content:center!important;
	position:relative!important;
	float:none!important;
	clear:none!important;
	flex:0 0 auto!important;
	width:auto!important;
	min-width:0!important;
	max-width:100%!important;
	height:auto!important;
	min-height:0!important;
	margin:0!important;
	padding:var(--tabs2-tab-padding-y) var(--tabs2-tab-padding-x)!important;
	background:var(--tabs2-tab-bg)!important;
	background-image:none!important;
	border:1px solid transparent!important;
	border-radius:var(--tabs2-tab-radius)!important;
	color:var(--tabs2-tab-text)!important;
	font-family:inherit!important;
	font-size:var(--tabs2-tab-font-size)!important;
	font-weight:var(--tabs2-tab-font-weight)!important;
	font-style:normal!important;
	line-height:1.25!important;
	text-align:center!important;
	text-decoration:none!important;
	text-transform:none!important;
	letter-spacing:normal!important;
	white-space:normal!important;
	vertical-align:middle!important;
	cursor:pointer!important;
	box-shadow:none!important;
	text-shadow:none!important;
	transition:background-color .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease!important;
}
.flexi-tabs2-set .flexi-tabs2-nav .flexi-tabs2-button:hover {
	background:var(--tabs2-tab-bg-hover)!important;
	border-color:var(--tabs2-tab-border)!important;
	color:var(--tabs2-tab-active-text)!important;
}
.flexi-tabs2-set .flexi-tabs2-nav .flexi-tabs2-button:focus {outline:none!important;}
.flexi-tabs2-set .flexi-tabs2-nav .flexi-tabs2-button:focus-visible {outline:2px solid var(--tabs2-focus)!important;outline-offset:-3px!important;z-index:2!important;}
.flexi-tabs2-set .flexi-tabs2-nav .flexi-tabs2-button.is-active {
	background:var(--tabs2-tab-active-bg)!important;
	border-color:var(--tabs2-tab-border)!important;
	color:var(--tabs2-tab-active-text)!important;
	box-shadow:inset 0 3px 0 var(--tabs2-tab-active-accent),0 1px 2px rgba(0,0,0,.08)!important;
}

/* The tab bar is the only boxed UI. Content below it flows like normal page
   content with breathing room, but no border, card background, or side inset. */
.flexi-tabs2-panels {display:block!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;float:none!important;clear:both!important;}
.flexi-tabs2-set .flexi-tabs2-panel {
	display:block;
	width:100%!important;
	max-width:none!important;
	margin:0!important;
	padding:var(--tabs2-content-gap) 0 var(--tabs2-content-bottom)!important;
	float:none!important;
	clear:both!important;
	background:transparent!important;
	border:0!important;
	border-radius:0!important;
	box-shadow:none!important;
	color:inherit!important;
}
.flexi-tabs2-set.is-ready .flexi-tabs2-panel:not(.is-active) {display:none!important;}
.flexi-tabs2-set.is-ready .flexi-tabs2-panel.is-active {display:block!important;}
.flexi-tabs2-tab-label {display:block;margin:0 0 12px;font-size:1.2em;font-weight:700;line-height:1.25;}
.flexi-tabs2-tab-label[hidden] {display:none!important;}
.flexi-tabs2-panel-title {display:none!important;margin:0 0 14px;}
.flexi-tabs2-content {display:block;width:100%;margin:0!important;padding:0!important;}
.flexi-tabs2-content > :first-child {margin-top:0;}
.flexi-tabs2-content > :last-child {margin-bottom:0;}
.flexi-tabs2-panel-admin:empty {display:none;}
.flexi-tabs2-panel-admin {margin:0 0 12px;}
.flexi-tabs2-title {margin-top:0;}
.flexi-tabs2-module .flexi-module-links {display:inline-block;}
.flexi-tabs2-module .ModuleEditLink {white-space:nowrap;}

/* Medium-width module: keep horizontal tabs, but tighten them so wrapping is
   efficient and intentional in two- or three-column layouts. */
@container tabs2 (max-width:700px) {
	.flexi-tabs2-set {
		--tabs2-tab-font-size:14px;
		--tabs2-tab-padding-y:9px;
		--tabs2-tab-padding-x:12px;
		--tabs2-content-gap:22px;
	}
}

/* Narrow module: switch to a compact vertical sub-navigation. This responds
   to the module width itself, not the browser width. */
@container tabs2 (max-width:520px) {
	.flexi-tabs2-set {
		--tabs2-tab-font-size:14px;
		--tabs2-tab-padding-y:8px;
		--tabs2-tab-padding-x:11px;
		--tabs2-content-gap:20px;
		--tabs2-content-bottom:14px;
	}
	.flexi-tabs2-set .flexi-tabs2-nav {
		flex-direction:column!important;
		flex-wrap:nowrap!important;
		gap:2px!important;
		padding:4px!important;
	}
	.flexi-tabs2-set .flexi-tabs2-nav .flexi-tabs2-button {
		flex:0 0 auto!important;
		justify-content:flex-start!important;
		width:100%!important;
		max-width:none!important;
		text-align:left!important;
	}
	.flexi-tabs2-set .flexi-tabs2-nav .flexi-tabs2-button.is-active {
		box-shadow:inset 3px 0 0 var(--tabs2-tab-active-accent),0 1px 2px rgba(0,0,0,.06)!important;
	}
}

/* Fallback for older browsers without container queries. Tabs still wrap and
   never use a horizontal scrollbar. On small screens they stack vertically. */
@supports not (container-type:inline-size) {
	@media only screen and (max-width:560px) {
		.flexi-tabs2-set {--tabs2-tab-font-size:14px;--tabs2-tab-padding-y:8px;--tabs2-tab-padding-x:11px;--tabs2-content-gap:20px;--tabs2-content-bottom:14px;}
		.flexi-tabs2-set .flexi-tabs2-nav {flex-direction:column!important;flex-wrap:nowrap!important;gap:2px!important;padding:4px!important;}
		.flexi-tabs2-set .flexi-tabs2-nav .flexi-tabs2-button {justify-content:flex-start!important;width:100%!important;max-width:none!important;text-align:left!important;}
		.flexi-tabs2-set .flexi-tabs2-nav .flexi-tabs2-button.is-active {box-shadow:inset 3px 0 0 var(--tabs2-tab-active-accent),0 1px 2px rgba(0,0,0,.06)!important;}
	}
}